<!-- DC Dream Accordion CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/sliders/dream-accordion/css/dream-accordion.css" />
<!-- DC Javascript Library -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
<script type="text/javascript" src="dreamcodes/jquery.easing.js"></script> <!-- jQuery Easing (do not call twice on same page) -->
<!-- DC Dream Accordion JS -->
<script type="text/javascript" src="dreamcodes/sliders/dream-accordion/js/froogaloop.min.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/dream-accordion/js/jquery.transform-0.9.3.min.js" ></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="dreamcodes/sliders/dream-accordion/js/jquery.getimagedata.min.js"></script>
<script type="text/javascript" src="dreamcodes/sliders/dream-accordion/js/dream-accordion.js"></script>
<!-- DC Dream Accordion Settings -->
<script type="text/javascript">
// SETTINGS
var as_settings = {
/* visibleItems: less of equal to total items in acordion */
visibleItems:5,
/* slideshowOn; true, false */
slideshowOn: true,
/* useGlobalDelay; true, false (use same timer delay for all slides, if false you NEED to set individual delays for all slides) */
useGlobalDelay: true,
/* slideshowDelay; slideshow delay, in miliseconds (2500 = 2.5 seconds) */
slideshowDelay: 2500,
/* randomPlay; true, false (play slides in normal or random order or to be more accurate, if true - mixes slide order on the beginning to simulate random) */
randomPlay: false,
/* includeVideoInSlideshow; autoplay video if exist in slide and on video finish continue with next slide (true/false) */
includeVideoInSlideshow: false,
/* openOnRollover; true, false (open slides on rollover or click) */
openOnRollover: true,
/* useScroll; true, false */
useScroll: true,
/* scrollDraggerOverColor; scroll dragger color on mouse over */
scrollDraggerOverColor: '#658',
/* useControls; true/false */
useControls: true,
/* openSlideNum; open slide on begining, enter -1 for none, 0 = first, 1 = second, 2 = third... etc. */
openSlideNum: 0,
/* transitionTime: transition time for slide in miliseconds */
transitionTime: 1000,
/* transitionEase: transition ease for slide, (some eases may possibly not work correctly), check eases here: http://gsgd.co.uk/sandbox/jquery/easing/ */
transitionEase: 'easeOutQuint'
};
jQuery(window).load(function() {
jQuery.noConflict();
jQuery.accordionSlider('#sliderWrapper', as_settings);
as_settings = null;
//after div holder (#gmap_canvas) for google map is ready in the dom, otherwise we get an error in ie coming from google maps.
//google.maps.event.addDomListener(window, 'load', initialize);
initializeGmap();
});
/*
https://developers.google.com/maps/documentation/javascript/reference
google map example
*/
var gmap;
function initializeGmap() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(48.856614, 2.3522219), // google map location to show
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gmap = new google.maps.Map(document.getElementById('gmap_canvas'),
myOptions);
}
</script>
<!-- DC Dream Accordion Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div id="sliderWrapper">
<div class="sliderCointainer">
<div class="sliderHolder">
<!-- Slide 1 -->
<div class='slideDiv' data-width='500' data-content='' data-link='http://www.google.com' data-target='_blank' data-delay='3000'>
<!-- sample local image:
<!-- <img class='stack_img' src='../sliders/dream-accordion/data/images/01.jpg' width='500' height='333' alt='' /> -->
<img class='stack_img' src='http://pimg.co/p/500x333/eee' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Dream Accordion</p>
<p data-title='caption' class="50,200" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">The World's Best Accordion Slider</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.3)" data-color="#ffffff">
<a style="text-decoration:none" href="#" target="_blank">Supports YouTube, Vimeo & HTML Content.</a></p>
</div>
<!-- Slide 2 -->
<div class='slideDiv' data-width='500' data-content='' data-link='' data-delay='5000'>
<div id="gmap_canvas"></div>
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(153,204,0, 0.6)" data-color="#ffffff">Google maps</p>
<p data-title='caption' class="50,250" data-background-color="rgba(153,204,0, 0.6)" data-color="#ffffff">Google Maps (try it!)</p>
</div>
<!-- Slide 3 -->
<div class='slideDiv' data-width='500' data-content='youtube' data-link='FG0fTKAqZ5g' data-delay='3000'> <!-- data-link: add youtube video id here -->
<img class='stack_img' src='http://pimg.co/p/500x333/ccc' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(204,0,0, 0.6)" data-color="#ffffff">YouTube Supported</p>
<p data-title='caption' class="50,50" data-background-color="rgba(204,0,0, 0.6)" data-color="#ffffff">This is Youtube</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Click anywhere to view the video</p>
</div>
<!-- Slide 4 -->
<div class='slideDiv' data-width='500' data-content='vimeo' data-link='4749536' data-delay='3000'> <!-- data-link: add vimeo video id here -->
<img class='stack_img' src='http://pimg.co/p/500x333/999' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(0,153,204, 0.6)" data-color="#ffffff">Vimeo Supported</p>
<p data-title='caption' class="50,50" data-background-color="rgba(0,153,204, 0.6)" data-color="#ffffff">This is Vimeo</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Click to play</p>
</div>
<!-- Slide 5 -->
<div class='slideDiv' data-width='500' data-content='image' data-link='' data-target='' data-delay='3000' >
<img class='stack_img' src='http://pimg.co/p/500x333/666' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(255,102,0, 0.6)" data-color="#ffffff">100% Flexible</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Tons of customization options</p>
</div>
<!-- Slide 6 -->
<div class='slideDiv' data-width='500' data-content='' data-link='' data-target='' data-delay='3000'>
<img class='stack_img' src='http://pimg.co/p/500x333/333' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(94,73,188, 0.6)" data-color="#ffffff">More Slides!</p>
<p data-title='caption' class="50,50" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Shows more slides gradually</p>
</div>
<!-- Slide 7 -->
<div class='slideDiv' data-width='500' data-content='' data-link='' data-target='' data-delay='3000'>
<img class='stack_img' src='http://pimg.co/p/500x333/000' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(4,4,4, 0.6)" data-color="#ffffff">Links & more!</p>
<p data-title='caption' class="50,200" data-background-color="rgba(128,128,128, 0.6)" data-color="#ffffff">Supports Real Links!</p>
<p data-title='caption' class="50,250" data-background-color="rgba(91,91,91, 0.6)" data-color="#ffffff"><a style="text-decoration:none" href="http://www.bing.com" target="_blank">Click me: Bing Search</a></p>
</div>
</div> <!-- /sliderHolder -->
</div> <!-- /sliderCointainer -->
<!-- accordion controls -->
<div class="controls">
<div class="controls_prev"><img src='dreamcodes/sliders/dream-accordion/data/icons/controls_prev.gif' width='9' height='13' alt='controls_prev'/></div>
<div class="controls_toggle"><img src='dreamcodes/sliders/dream-accordion/data/icons/controls_play.gif' width='9' height='13' alt='controls_toggle'/></div>
<div class="controls_next"><img src='dreamcodes/sliders/dream-accordion/data/icons/controls_next.gif' width='9' height='13' alt='controls_next'/></div>
</div>
<!-- accordion scroll -->
<div class="scroll">
<div class="scrollTrack"></div>
<div class="scrollBar"></div>
</div>
<div class="fontMeasure">a</div>
<!-- preloader
<div class="mediaPreloader"></div>-->
</div> <!-- /sliderWrapper -->
</div>
<!-- DC Dream Accordion End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->